<template>
  <!-- 可以从色香味 图片等多个维度进行评价 -->
  <view class="comment-page">
    <!-- 评价弹窗 -->
    <wd-message-box selector="submit" custom-class="comment-box">
      <wd-textarea
        placeholder="可以从色、香、味等多个维度进行评价~"
        clearable
        clear-trigger="focus"
        v-model="commentValue"
        custom-class="comment-textarea"
      />
    </wd-message-box>

    <view class="slot-white"></view>

    <BaseLoading v-if="loading" />
    <view class="dish-list flex p-35" v-else>
      <view
        class="dish-list-item mt-25 p-32"
        v-for="(item, index) of commentList"
        :key="index"
      >
        <view class="header flex-column-center">
          <view class="name">{{ item.name }}</view>
          <wd-rate
            :active-color="'#ff8e8e'"
            v-model="item.rate"
            @change="(value) => rateChange(item, value)"
          />
        </view>

        <view class="image-wrap flex-center mt-20">
          <wd-img
            width="88"
            height="88"
            mode="aspectFill"
            radius="8"
            :enable-preview="true"
            :src="item.url"
          ></wd-img>
        </view>
        <view class="comment mt-20 flex">
          <view class="content">{{ item.comment }}</view>
          <wd-icon
            custom-class="ml-20"
            name="edit"
            size="22px"
            @click="writeComment(item)"
          ></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 覆盖Wot Design Uni 默认样式
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>

<script setup>
import { ref, onMounted } from "vue";
import { useMessage } from "@/node_modules/wot-design-uni";

import { getMenuList, updateRate, updateComment } from "../../../api/menu";
import { toast } from "../../../utils/common";

const loading = ref(false);
const commentList = ref([]);
function getList() {
  loading.value = true;
  getMenuList().then((res) => {
    loading.value = false;
    if (res.code === 0) {
      commentList.value = res.data;
    }
  });
}
onMounted(() => getList());

function rateChange(item, { value }) {
  updateRate({
    id: item.id,
    rate: value,
  });
}

const message = useMessage("submit");
const commentValue = ref(null);
function writeComment(item) {
  commentValue.value = item.comment;
  message
    .confirm({
      title: `【${item.name}】`,
      confirmButtonProps: {
        customClass: "confirm-button-class",
        type: "success",
      },
      beforeConfirm: ({ resolve }) => {
        if (!commentValue.value) {
          toast({
            title: "评价不能为空~",
            icon: "error",
          });
          resolve(false);
          return;
        }
        resolve(true);
      },
    })
    .then(() => {
      updateComment({
        comment: commentValue.value,
        id: item.id,
      }).then((res) => {
        if (res.code === 0) {
          toast({
            title: "评价成功",
            icon: "success",
          });
          item.comment = commentValue.value;
        }
      });
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>

<style scoped lang="scss">
.comment-page {
  height: 100%;
  background-image: linear-gradient(
    135deg,
    rgba(255, 225, 223, 0.2) 0%,
    rgba(255, 225, 223, 0.4) 100%
  );
  overflow: hidden;

  .slot-white {
    height: 25rpx;
    width: 100%;
    background-color: #fff;
  }

  :deep(.comment-box) {
    .wd-message-box__content {
      min-height: 200rpx;
    }

    .wd-textarea {
      text-indent: 32rpx;
    }
  }

  .loading {
    height: 100%;
    flex-direction: column;
    color: #333;
    font-size: 28rpx;
  }

  .dish-list {
    width: 100%;
    height: calc(100% - 25rpx);
    flex-wrap: wrap;
    box-sizing: border-box;
    overflow-y: auto;
    padding-top: 0;

    &-item {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      border-radius: 48rpx;

      .header {
        justify-content: space-between;

        .name {
          color: $button-secondary-color;
          white-space: nowrap;
        }
      }

      .comment {
        color: $text-shallow-color;
        font-size: 30rpx;
        justify-content: space-between;
        overflow-x: hidden;

        .content {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>

<style lang="less"></style>
